import * as THREE from 'three';

// Canvas
const canvas = document.querySelector("canvas.webgl");

// Scene
const scence = new THREE.Scene();

// Object
const geometry = new THREE.BoxGeometry(1, 1, 1)
const material = new THREE.MeshBasicMaterial({
    color: '#ff0000',
    // wireframe:true
})
const mesh = new THREE.Mesh(geometry, material);
scence.add(mesh)


// Sizes
const Sizes = {
    width: 800,
    height: 600
}


// Camera 
// 透视相机就是  物体离得近变大，离远变小
const camera = new THREE.PerspectiveCamera(75, Sizes.width / Sizes.height)
// 相机的初始位置在（0，0，0）中心点，看不见物体，移动相机
camera.position.z = 3
scence.add(camera)



// Renderer
const renderer  = new THREE.WebGLRenderer({
    canvas,
})
renderer.setSize(Sizes.width,Sizes.height);
renderer.render(scence,camera);
